.__svg{
	svg {
		width: 100%;
		height: 100%;
	}
}

#__svg-gold{
	fill: #ff4500;
	.gold, .gold1, .gold2, .gold3{
		transition: all 0.2s;
		opacity: 0;
	}
	.gold1{
		transform: translate(-500px,-500px);
		fill: #007AFF;
	}
	.gold2{
		transform: translate(500px,-900px);
	}
	.gold3{
		transform: translate(0,800px);
	}
}
#__svg-gold.action{
	svg{
		.gold, .gold1, .gold2, .gold3{
			transform: translate(0,0);
			opacity: 1;
		}	
	}
	
}
#__svg-photo{
	fill: #e1e1e1;
	.photo_g1{
		transform: translate(40px,40px);
	}
	.photo1{
		fill: #A7B8C6;
	}
	.photo2{
		fill: #FFFFFF;
	}
	.photo6{
	}
	.photo7{
		fill: #F1F1F1;
	}
	.photo8{
		fill: #F1F1F1;
	}
	.photo5{
		fill: #F1F1F1;
	}
	.photo3{
	}
}
#__svg-photo.action{
	// animation: rubberBand 1s;
	svg{
		.photo_g1{
			transition: transform 0.2s;
			transform: translate(0px,0px);
		}
		.photo1{
			fill: #A7B8C6;
		}
		.photo2{
			fill: #FFFFFF;
		}
		.photo3{
			fill: #3E3A39;
		}
		.photo4{
			fill: #95D4EB;
			transition: all 1s 0.3s;
		}
		.photo5{
			fill: #75BFAB;
			transition: all 0.5s 0.3s;
			animation: fadeInRight 0.5s 0.4s;
		}
		.photo6{
			fill: #F9F5B1;
			transition: all 0.5s 0.5s;
			animation: fadeInTopLeft 0.5s 0.7s;
		}
		.photo7{
			fill: #57B79C;
			transition: all 0.5s 0.5s;
			animation: fadeInRight 0.5s 0.5s;
		}
		.photo8{
			fill: #75BFAB;
			transition: all 0.5s 0.5s;
			animation: fadeInRight 0.5s 0.6s;
		}  
		.photo9{
			fill: #3E3A39;
			transition: all 0.5s 0.5s;
			animation: fadeInRight 0.5s 0.9s;
		}
	}
	
}

#__svg-score{
	.score1{
		fill: #e1e1e1;
	}
	.score2{
		fill: #e1e1e1;
	}
	.score3{
		fill: #FFFFFF;
	}
}
#__svg-score.action{
	svg{
		animation: rotate 0.5s 0.5s;
		animation-direction: alternate;
		.score1{
			fill: #FF7744;
		}
		.score2{
			fill: #FFAA44;
			animation: fadeInDownBig 0.2s;
		}
		.score3{
			fill: #FFFFFF;
			animation: backInUp 0.5s;
		}
	}
}

#__svg-zan{
	.zan1{
		 transform: translate(-100px, 750px);
		 transition: all 0.5s 0.2s;
	}
	.zan2{
		transform: translate(-250px, 750px);
		 transition: all 0.5s 0.3s;
	}
	.zan3{
		transform: translate(250px, 750px);
		 transition: all 0.4s 0.4s;
	}
	.zan4{ 
		 transform: translate(50px, 750px);
		 transition: all 0.3s 0.5s;
	}
	.zan5{
		 transform: translate(100px, 650px);
		 transition: all 0.5s 0.2s;
	}
	.zan1, .zan2, .zan3, .zan4, .zan5{
		 fill: #007AFF;
		 opacity: 0;
	}
	.zan6{
		fill: #e1e1e1;
	}
}
#__svg-zan.action{
	svg{
		.zan1, .zan2, .zan3, .zan4, .zan5{
			 opacity: 1;
			 transform: translate(0px);
		}
		.zan_g1{
			animation: rubberBand 0.5s;
		}
		.zan1{
			fill: #F07FFD;
		}
		.zan2{
			fill: #FF9D00;
		}
		.zan3{
			fill: #7CCBE2;
		}
		.zan4{
			fill: #E62A52;
		}
		.zan5{
			fill: #2C65AF;
		}
		.zan6{
			fill: #FFAA44;
		}
	}
	
}

#__svg-collect{
	fill: #e1e1e1;
	.collect_g1{
		transform: scale(2) translate(0px,30px);
		transform-origin: 50% 50%;
		transform-box: view-box;
	}
	.collect_g2{
		transform: scale(0.1);
	}
	.collect1{
		
	}
	.collect2{
		
	}
	.collect3{
		
	}
	.collect8{
		transform: translate(30px,20px);
	}
	.collect9{
		transform: translate(-30px,-20px);
	}
	.collect10{
		transform: translate(-30px,-20px);
	}
	.collect8, .collect9, .collect10{
		transition: transform 0.2s;
	}	
}
#__svg-collect.action{
	svg{
		.collect_g1{
			opacity: 1;
			animation: collectG1Anim 1s;
			animation-fill-mode: forwards;
			transform: translate(0, 30px);
		}
		.collect_g2{
			// transition: transform 1s;
			transform: rotate(0deg);
			transform: scale(1);
			animation: rotateBig 1s;
			transform-origin: 50% 50%;
			transform-box: view-box;
			opacity: 0;
		}
		.collect1{
			fill: #FFD8A0;
		}
		.collect2{
			fill: #FFF7EC;
		}
		.collect3{
			fill: #FFF4E4;
		}
		.collect4{
			fill: #FFC879;
		}
		.collect5{
			fill: #FFD495;
		}
		.collect6{
			fill: #FFF3E3;
		}
		.collect7{
			fill: #FFBD5E;
		}
		.collect8{
			fill: #FEC744;
			opacity: 0.4;
			transform: translate(0);
		}
		.collect9{
			fill: #FFBA00;
			transform: translate(0);
		}
		.collect10{
			fill: #FEC744;
			transform: translate(0);
		}
		.collect8, .collect9, .collect10{
			transition: transform 0.2s 1s;
		}	
		
	}
	
}
@keyframes collectG1Anim {
	0% {
		opacity: 0;
		transform: translate(-50%,-50%);
	}
	// zoomInUp
	50% {
		opacity: 0;
		transform: translate(-50%,-50%) scale(0.1);
	}
	85% {
		opacity: 1;
		transform: translate(0) scale(1);
	}
	100% {
		transform: translate(0px,30px) scale(2);
	}
}
@keyframes rotateBig {
	0% {
		transform: rotate(-720deg) scale(0.1);
	}
	75% {
		transform: rotate(0deg) scale(1);
	}
	85% {
		transform: rotate(0deg) scale(1);
		opacity: 1;
	}
	100% {
		transform: rotate(0deg) scale(2);
		opacity: 0;
	}
}

@keyframes rotate {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}


/**
 * 心跳动画图标的跳动效果
 */
@keyframes heartbeat {
	0% {
		transform: scale(1);
	}

	20% {
		transform: scale(0.8);
	}

	40% {
		transform: scale(1);
	}

	60% {
		transform: scale(0.9);
	}

	80%,
	100% {
		transform: scale(1);
	}
}
